<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
 <!-- 
  学生信息页面：

  一、学生列表渲染（封装函数）
    1.获取接口数据
    2.页面结构渲染
    3.当 window.onload 事件后进行调用渲染

  二、学生列表删除功能
    1.利用事件委托给 .list 绑定点击事件（利用事件冒泡的原理，只操作一次dom节省性能，同时动态元素也有了事件）
    2.判断点击元素是否拥有 bi-trash 类名，是则表示删除功能
    3.获取接口
    4.通过元素的不同之处 id ，删除点击的这个元素数据
    5.渲染页面
    6.点击的元素 如果有 bi-pen 类名，则是编辑功能，进行弹窗展示

  三、编辑或者新增功能
    1.点击添加按钮 绑定点击事件 让弹框显示
    2.modal盒子进行文字修改 重新赋值
    3.给submit提交按钮设置自定义属性，以此判定操作是新增还是编辑
    4.dataset.id  如果是add则是新增，否则是编辑功能（设置数据里的id，方便后期调用对应的数据进行渲染modal）
    5.新增功能需要 serialize 获取表单数据 

  四、省市区的数据操作
    1.进行省市区的选择
    2.分别用async函数获取省、市、区的接口数据
    3.map 遍历数据进行页面渲染
    4.逻辑中断 判断是否存在 如果存在则重新赋值显示
    5.用串行 实现省市区联动 绑定 change 事件===> 省发生变化 重新获取市、区；市发生变化 重新获取区


  五、完成新增功能
    1.新增功能
    2.获取接口进行传输数据
    3.关闭modal 设置添加成功提醒 渲染页面
  -->
</body>
</html>